<template>
    <view class="express">
        <view class="item" v-for="(item,index) in express_data" :key="index">
            <view class="picture">
                <img :src="item.img" alt />
                <view class="img_label" v-if="item.status == 1">拼团</view>
            </view>
            <view class="text">
                <view class="title">{{ item.title }}</view>
                <view class="label">
                    <span class="exchange" v-if="item.status == 0">已兑{{ item.label }}件</span>
                    <span class="group_buying" v-if="item.status == 1">拼团</span>
                </view>
                <view class="bottom">
                    <view class="integral">
                        <span class="span_left">{{ item.num1 }}积分</span>
                        <span class="span_right">{{ item.num2 }}积分</span>
                    </view>
                    <view class="express_status" :class="{'text_grey' : item.type == '已发货' || item.type == '已完成'}">{{ item.type }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        express_data: {
            type: Array,
            default: []
        }
    },
    components: {},
    data() {
        return {};
    },
    computed: {},
    methods: {},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
.express{
    .item{
        margin-bottom: 32rpx;
        display: flex;
        justify-content: space-between;
        .picture{
            position: relative;
            img{
                width: 160rpx;
                height: 160rpx;
                object-fit: cover;
                object-position: center;
            }
            .img_label{
                text-align: center;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 50%;
                border-radius: 0 16rpx 0 16rpx;
                background: linear-gradient(to right, #FF977B,#FF504C);
                color: #fff;
                font-size: 24rpx;
                line-height: 40rpx;
            }
        }
        .text{
            width: calc(100% - 160rpx);
            box-sizing: border-box;
            padding-left: 24rpx;
            .title{
                font-size: 28rpx;
                font-weight: 600;
                color: #333;
                line-height: 1em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-bottom: 20rpx;
            }
            .label{
                display: inline-block;
                .exchange{  
                    background-color: #F8F8FB;
                    border-radius: 4rpx;
                    font-size: 20rpx;
                    color: #666;
                    padding: 0 8rpx;
                    line-height: 36rpx;
                }
                .group_buying{
                    background-color: #FFF8F7;
                    border-radius: 4rpx;
                    font-size: 20rpx;
                    color: #FF4642;
                    padding: 0 8rpx;
                    line-height: 36rpx;
                }
            }
            .bottom{
                padding-top: 24rpx;
                display: flex;
                justify-content: space-between;
                .integral{
                    display: flex;
                    justify-content: flex-start;
                    .span_left{
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #FF504C;
                        line-height: 1em;
                        padding-right: 8rpx;
                    }
                    .span_right{
                        font-size: 24rpx;
                        color: #999;
                        line-height: 28rpx;
                        text-decoration: line-through;
                    }
                }
                .express_status{
                    font-size: 24rpx;
                    color: #FF504C;
                    line-height: 28rpx;
                }
            }
        }
    }
}
.text_grey{
    color: #999 !important;
}
</style>